<template>
  <div class="message-settings">
    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" class="settings-tabs" style="margin: 0">
      <el-tab-pane label="敏感词过滤" name="keyword">
        <!-- 敏感词列表组件 -->
        <sensitive-word-list
          ref="sensitiveWordListRef"
          @add="handleAdd"
          @edit="handleEdit"
          @show-record="handleShowRecord"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 敏感词表单组件 -->
    <sensitive-word-form
      v-model="formVisible"
      :edit-data="editData"
      @success="handleFormSuccess"
    />

    <!-- 敏感词触发记录组件 -->
    <sensitive-word-record v-model="recordVisible" :keyword="currentKeyword" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import SensitiveWordList from "@/components/sensitive-word/SensitiveWordList.vue";
import SensitiveWordForm from "@/components/sensitive-word/SensitiveWordForm.vue";
import SensitiveWordRecord from "@/components/sensitive-word/SensitiveWordRecord.vue";

// 当前激活的标签页
const activeTab = ref("keyword");

// 列表组件引用
const sensitiveWordListRef = ref(null);

// 表单相关
const formVisible = ref(false);
const editData = ref(null);

// 记录相关
const recordVisible = ref(false);
const currentKeyword = ref("");

// 处理添加
const handleAdd = () => {
  editData.value = null;
  formVisible.value = true;
};

// 处理编辑
const handleEdit = (row) => {
  editData.value = row;
  formVisible.value = true;
};

// 处理显示记录
const handleShowRecord = (row) => {
  currentKeyword.value = row.keyword;
  recordVisible.value = true;
};

// 处理表单提交成功
const handleFormSuccess = () => {
  sensitiveWordListRef.value?.loadKeywordList();
};
</script>

<style scoped>
.message-settings {
  margin-top: -10px;
}

.settings-tabs {
  margin-top: 20px;
}
</style> 